import React, { useEffect, useState } from "react";
import * as echarts from "echarts";

const RingBar: React.FC<any> = ({ RingBarData }) => {
  let [RingBar_chart] = useState<echarts.ECharts>();

  //   useEffect(()=>{
  //     console.log(RingBarData);

  //       },[RingBarData])

  const getSeriesData = () => {
    const series: {
      name: any;
      type: string;
      clockwise: boolean;
      emphasis: { scale: boolean };
      radius: string[];
      center: string[];
      label: { show: boolean } | { show: boolean };
      data:
        | (
            | { value: any; name: any }
            | {
                value: number;
                itemStyle: { color: string; borderWidth: number };
                tooltip: { show: boolean };
                emphasis: { scale: boolean };
              }
          )[]
        | {
            value: number;
            itemStyle: { color: string; borderWidth: number };
            tooltip: { show: boolean };
            emphasis: { scale: boolean };
          }[];
      silent?: boolean;
      z?: number;
    }[] = [];

    RingBarData.abnormals.forEach(
      (item: { name: any; value: any }, index: number) => {
        // 上层
        series.push({
          name: item.name,
          type: "pie",
          clockwise: false,
          emphasis: { scale: false }, // 修改：使用 emphasis.scale 替换 hoverAnimation
          radius: [73 - index * 15 + "%", 68 - index * 15 + "%"],
          center: ["55%", "55%"],
          label: {
            show: false,
          },
          data: [
            {
              value: item.value,
              name: item.name,
              emphasis: { scale: false }, // 添加：为每个数据项添加 emphasis.scale 属性
            },
            {
              value: 1000,
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              emphasis: { scale: false }, // 添加：为每个数据项添加 emphasis.scale 属性
            },
          ],
        });

        // 底层
        series.push({
          name: item.name,
          type: "pie",
          silent: true,
          clockwise: false,
          z: 1,
          emphasis: { scale: false }, // 修改：使用 emphasis.scale 替换 hoverAnimation
          radius: [73 - index * 15 + "%", 68 - index * 15 + "%"],
          center: ["55%", "55%"],
          label: {
            show: false,
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: "rgba(3,31,62)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              emphasis: { scale: false }, // 添加：为每个数据项添加 emphasis.scale 属性
            },
            {
              value: 2.5,
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              emphasis: { scale: false }, // 添加：为每个数据项添加 emphasis.scale 属性
            },
          ],
        });
      }
    );
    return series;
  };

  useEffect(() => {
    RingBar_chart = echarts.init(
      document.getElementById("RingBar_chart") as HTMLElement
    );

    // 构建option配置对象
    const options = {
      // 图例配置
      legend: {
        show: true,
        icon: "circle",
        top: "14%",
        left: "60%",
        data: RingBarData.abnormals.map((item: { name: string }) => item.name),
        width: -5,
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 6,
        textStyle: {
          fontSize: 12,
          lineHeight: 5, // 修改：将 linHeifht 改为 lineHeight
          color: "rgba(255,255,255,0.8)",
        },
      },
      // 提示层
      tooltip: {
        show: true,
        trigger: "item",
        formatter: "{a}<br>{b}:{c}({d})",
      },
      // Y轴
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisLine: {
            show: false,
          },
        },
      ],
      // X轴
      xAxis: [
        {
          show: false,
        },
      ],
      // 核心配置
      series: getSeriesData(),
    };

    RingBar_chart.setOption(options);
  }, [RingBarData]);

  return (
    <div className="w-full h-full">
      <div>【大区异常处理】</div>
      <div id="RingBar_chart" className="w-full h-full"></div>
    </div>
  );
};
export default RingBar;
